<template>
    <div>{{msg}}</div>
</template>

<script>
/**
 * vue3组合式api
 * setup是vue3的一个新特性，一个生命周期，在beforecreate之前执行。
 *   所以无法访问data、created、mouted ..等选项的数据
 *      甚至是在setup中 由于他执行最早，没有this
 * 
 */
export default{
    //组合式api   
    setup(){ 
        console.log('setup执行了通过this发现数据都没有访问到：',this);//undefined
        return{
            //你想在组件中显示的数据
            msg:'Hello Vue3'
        }
    },
    //定义数据 会覆盖上面的数据
    data(){
        return{
            //你想在组件中显示的数据
            msg:'Hello Vue3,数据体的内容'
        }
    },
    //创建周期
    created(){
        console.log('created执行了');
    },
    //组件销毁前
    beforeCreate(){
        console.log('beforeCreate执行了销毁、');
    }
};


</script>

<style>


</style>